<template>
  <div class="admin-users-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-title">
            <h1>👥 用户管理</h1>
            <p>管理系统中的所有用户，维护用户安全</p>
          </div>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <div class="stat-number">{{ total }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选器 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="filters" inline class="filter-form">
        <el-form-item label="关键词">
          <el-input
            v-model="filters.keyword"
            placeholder="搜索用户名或邮箱"
            clearable
            style="width: 200px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status" placeholder="选择状态" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="正常" :value="1" />
            <el-option label="已禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetFilters">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 当前筛选条件 -->
    <div v-if="hasActiveFilters" class="filter-status">
      <div class="filter-status-header">
        <span class="filter-status-title">当前筛选条件</span>
        <el-button type="danger" plain size="small" @click="resetFilters">
          <el-icon><Close /></el-icon>
          清除所有筛选
        </el-button>
      </div>
      <div class="filter-tags">
        <el-tag
          v-if="filters.keyword"
          type="primary"
          closable
          @close="
            filters.keyword = '';
            handleSearch();
          "
        >
          关键词: {{ filters.keyword }}
        </el-tag>
        <el-tag
          v-if="filters.status !== ''"
          type="warning"
          closable
          @close="
            filters.status = '';
            handleSearch();
          "
        >
          状态: {{ getStatusName(filters.status) }}
        </el-tag>
      </div>
    </div>

    <!-- 用户列表 -->
    <el-card class="users-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>用户列表 (共 {{ total }} 条)</span>
          <div class="header-actions">
            <el-button type="primary" @click="loadUsers" :loading="loading" size="small">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        :data="users"
        v-loading="loading"
        style="width: 100%"
        :empty-text="loading ? '加载中...' : '暂无数据'"
        stripe
      >
        <el-table-column prop="id" label="ID" width="80" sortable />
        <el-table-column label="用户信息" min-width="250">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :src="row.avatar" :size="48">
                {{ row.username?.charAt(0) }}
              </el-avatar>
              <div class="user-detail">
                <div class="username">{{ row.username }}</div>
                <div class="email">{{ row.email }}</div>
                <div class="nickname" v-if="row.profile?.nickname">
                  昵称: {{ row.profile.nickname }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="120">
          <template #default="{ row }">
            <div class="roles">
              <el-tag
                v-for="role in Array.isArray(row.roles) ? row.roles : []"
                :key="role"
                :type="
                  role === 'SYSTEM_ADMIN' ? 'danger' : role === 'ADMIN' ? 'warning' : 'primary'
                "
                size="small"
                effect="dark"
              >
                {{
                  role === "SYSTEM_ADMIN"
                    ? "系统管理员"
                    : role === "ADMIN"
                    ? "管理员"
                    : role === "USER"
                    ? "用户"
                    : role
                }}
              </el-tag>
              <span v-if="!row.roles || row.roles.length === 0" class="text-muted">普通用户</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
              {{ row.status === 1 ? "正常" : "已禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="180" sortable prop="createTime">
          <template #default="{ row }">
            <div class="time-info">
              <div>{{ formatTime(row.createTime) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后登录" width="180">
          <template #default="{ row }">
            <div class="time-info">
              <div v-if="row.lastLoginTime">{{ formatTime(row.lastLoginTime) }}</div>
              <span v-else class="text-muted">从未登录</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button size="small" @click="viewUser(row)" type="info" plain>
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-tooltip
                :content="getStatusButtonTooltip(row)"
                :disabled="!isCurrentUser(row.id) && (isSystemAdmin || !isSystemAdminUser(row))"
                placement="top"
              >
                <el-button
                  :type="row.status === 1 ? 'danger' : 'success'"
                  size="small"
                  @click="toggleStatus(row)"
                  :disabled="isCurrentUser(row.id) || (!isSystemAdmin && isSystemAdminUser(row))"
                  plain
                >
                  <el-icon>
                    <Lock v-if="row.status === 1" />
                    <Unlock v-else />
                  </el-icon>
                  {{ row.status === 1 ? "禁用" : "启用" }}
                </el-button>
              </el-tooltip>
              <el-tooltip
                v-if="isSystemAdmin"
                :content="getAdminButtonTooltip(row)"
                :disabled="!isCurrentUser(row.id) && !isSystemAdminUser(row)"
                placement="top"
              >
                <el-button
                  :type="isAdmin(row) ? 'warning' : 'primary'"
                  size="small"
                  @click="setAdmin(row)"
                  :disabled="isCurrentUser(row.id) || isSystemAdminUser(row)"
                  plain
                >
                  <el-icon>
                    <UserFilled v-if="isAdmin(row)" />
                    <UserDefault v-else />
                  </el-icon>
                  {{ isAdmin(row) ? "取消管理员" : "设为管理员" }}
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>

    <!-- 用户详情对话框 -->
    <el-dialog
      v-model="userDetailVisible"
      title="用户详情"
      width="600px"
      :before-close="handleCloseUserDetail"
    >
      <div v-if="selectedUser" class="user-detail-content">
        <div class="user-header">
          <el-avatar :src="selectedUser.avatar" :size="80">
            {{ selectedUser.username?.charAt(0) }}
          </el-avatar>
          <div class="user-basic-info">
            <h3>{{ selectedUser.username }}</h3>
            <p class="user-email">{{ selectedUser.email }}</p>
            <div class="user-roles">
              <el-tag
                v-for="role in selectedUser.roles"
                :key="role"
                :type="
                  role === 'SYSTEM_ADMIN' ? 'danger' : role === 'ADMIN' ? 'warning' : 'primary'
                "
                size="small"
                effect="dark"
              >
                {{
                  role === "SYSTEM_ADMIN"
                    ? "系统管理员"
                    : role === "ADMIN"
                    ? "管理员"
                    : role === "USER"
                    ? "用户"
                    : role
                }}
              </el-tag>
            </div>
          </div>
        </div>

        <el-divider />

        <div class="user-info-grid">
          <div class="info-item">
            <label>用户ID</label>
            <span>{{ selectedUser.id }}</span>
          </div>
          <div class="info-item">
            <label>账号状态</label>
            <el-tag :type="selectedUser.status === 1 ? 'success' : 'danger'" size="small">
              {{ selectedUser.status === 1 ? "正常" : "已禁用" }}
            </el-tag>
          </div>
          <div class="info-item">
            <label>邮箱验证</label>
            <el-tag :type="selectedUser.emailVerified ? 'success' : 'warning'" size="small">
              {{ selectedUser.emailVerified ? "已验证" : "未验证" }}
            </el-tag>
          </div>
          <div class="info-item">
            <label>注册时间</label>
            <span>{{ formatTime(selectedUser.createTime) }}</span>
          </div>
          <div class="info-item">
            <label>最后登录</label>
            <span v-if="selectedUser.lastLoginTime">{{
              formatTime(selectedUser.lastLoginTime)
            }}</span>
            <span v-else class="text-muted">从未登录</span>
          </div>
          <div class="info-item">
            <label>最后更新</label>
            <span>{{ formatTime(selectedUser.updateTime) }}</span>
          </div>
        </div>

        <el-divider />

        <div class="user-stats" v-if="selectedUser.stats">
          <h4>数据统计</h4>
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-number">{{ selectedUser.stats.postCount || 0 }}</div>
              <div class="stat-label">发布帖子</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ selectedUser.stats.commentCount || 0 }}</div>
              <div class="stat-label">评论数量</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ selectedUser.stats.followerCount || 0 }}</div>
              <div class="stat-label">粉丝数量</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ selectedUser.stats.followingCount || 0 }}</div>
              <div class="stat-label">关注数量</div>
            </div>
          </div>
        </div>

        <el-divider v-if="selectedUser.profile" />

        <div class="user-profile" v-if="selectedUser.profile">
          <h4>个人资料</h4>
          <div class="info-item" v-if="selectedUser.profile.bio">
            <label>个人简介</label>
            <span>{{ selectedUser.profile.bio }}</span>
          </div>
          <div class="info-item" v-if="selectedUser.profile.location">
            <label>所在地</label>
            <span>{{ selectedUser.profile.location }}</span>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseUserDetail">关闭</el-button>
          <el-button type="primary" @click="handleViewUserPosts" v-if="selectedUser">
            查看用户帖子
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Search,
  Refresh,
  View,
  Lock,
  Unlock,
  User as UserDefault,
  UserFilled,
  Close,
} from "@element-plus/icons-vue";
import { searchAdminUsers, toggleUserStatus, setUserAsAdmin, removeUserAdmin } from "@/api/admin";
import type { User } from "@/types";

const router = useRouter();
const store = useStore();

// 响应式数据
const loading = ref(false);
const users = ref<User[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(20);

// 用户详情对话框相关
const userDetailVisible = ref(false);
const selectedUser = ref<User | null>(null);

// 筛选条件
const filters = reactive({
  keyword: "",
  status: "" as string | number,
});

// 当前登录用户ID和角色信息
const currentUserId = store.getters["auth/user"]?.id;
const currentUserRoles = store.getters["auth/user"]?.roles || [];

// 检查当前用户是否为系统管理员
const isSystemAdmin = computed(() => {
  return currentUserRoles.includes("SYSTEM_ADMIN");
});

// 加载用户列表
const loadUsers = async () => {
  loading.value = true;
  try {
    const params: any = {
      page: currentPage.value,
      size: pageSize.value,
    };

    // 添加筛选条件
    if (filters.keyword) {
      params.keyword = filters.keyword;
    }
    if (filters.status !== "") {
      params.status = filters.status;
    }

    const response = await searchAdminUsers(params);
    console.log("API Response:", response); // 调试日志

    // 处理PageResult格式的响应数据
    if (response && typeof response === "object") {
      // 检查是否是 Result 格式 (code, message, data)
      if ("data" in response && response.data) {
        const pageResult = response.data as { items?: User[]; total?: number };
        users.value = pageResult?.items || [];
        total.value = pageResult?.total || 0;
      } else {
        // 直接是 PageResult 格式
        const pageResult = response as { items?: User[]; total?: number };
        users.value = pageResult?.items || [];
        total.value = pageResult?.total || 0;
      }
    } else {
      users.value = [];
      total.value = 0;
    }
  } catch (error: unknown) {
    console.error("Failed to load users:", error);

    const err = error as { response?: { status?: number }; code?: string };
    if (err?.response?.status === 403) {
      ElMessage.error("权限不足，无法访问用户管理");
    } else if (err?.response?.status === 401) {
      ElMessage.error("登录已过期，请重新登录");
    } else if (err?.code === "NETWORK_ERROR") {
      ElMessage.error("网络连接失败，请检查网络");
    } else {
      ElMessage.error("加载用户列表失败，请稍后重试");
    }

    users.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  loadUsers();
};

// 重置筛选
const resetFilters = () => {
  filters.keyword = "";
  filters.status = "";
  handleSearch();
};

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  loadUsers();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadUsers();
};

// 查看用户详情
const viewUser = (user: User) => {
  // 直接使用当前用户信息显示详情
  selectedUser.value = user;
  userDetailVisible.value = true;
};

// 关闭用户详情对话框
const handleCloseUserDetail = () => {
  userDetailVisible.value = false;
  selectedUser.value = null;
};

// 查看用户帖子
const handleViewUserPosts = () => {
  if (selectedUser.value) {
    // 跳转到帖子管理页面，并设置用户筛选
    router.push({
      name: "admin-posts",
      query: { userId: selectedUser.value.id },
    });
    handleCloseUserDetail();
  }
};

// 是否是当前用户
const isCurrentUser = (userId: number) => {
  return userId === currentUserId;
};

// 是否是管理员
const isAdmin = (user: User) => {
  if (!user.roles || !Array.isArray(user.roles)) {
    return false;
  }
  return user.roles.includes("ADMIN") || user.roles.includes("SYSTEM_ADMIN");
};

// 是否是系统管理员
const isSystemAdminUser = (user: User) => {
  if (!user.roles || !Array.isArray(user.roles)) {
    return false;
  }
  return user.roles.includes("SYSTEM_ADMIN");
};

// 切换用户状态
const toggleStatus = async (user: User & { status?: number }) => {
  console.log("toggleStatus called with user:", user);
  console.log("Current user status:", user.status);
  console.log("Current user ID:", user.id);
  console.log("Current logged in user ID:", currentUserId);

  if (isCurrentUser(user.id)) {
    ElMessage.warning("不能禁用自己的账号");
    return;
  }

  // 检查权限：普通管理员不能禁用系统管理员
  if (!isSystemAdmin.value && isSystemAdminUser(user)) {
    ElMessage.warning("权限不足，不能禁用系统管理员账号");
    return;
  }

  const newStatus = user.status === 1 ? 0 : 1;
  const action = user.status === 1 ? "禁用" : "启用";

  console.log("Will change status to:", newStatus);
  console.log("Action:", action);

  try {
    await ElMessageBox.confirm(`确定要${action}用户 ${user.username} 吗？`, "确认操作", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    console.log("User confirmed, calling API...");

    // 调用启用/禁用API
    const result = await toggleUserStatus(user.id, newStatus);
    console.log("API response:", result);

    ElMessage.success(`${action}成功`);

    // 重新加载用户列表
    await loadUsers();
  } catch (error) {
    console.error("Toggle user status error:", error);
    if (error !== "cancel") {
      ElMessage.error("操作失败: " + (error as any)?.message || "未知错误");
    }
  }
};

// 设置为管理员
const setAdmin = async (user: User) => {
  if (isAdmin(user)) {
    // 移除管理员权限
    try {
      await ElMessageBox.confirm(`确定要移除用户 ${user.username} 的管理员权限吗？`, "确认操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });

      await removeUserAdmin(user.id);
      ElMessage.success("移除管理员权限成功");
      loadUsers();
    } catch (error) {
      if (error !== "cancel") {
        console.error("Remove admin failed:", error);
        ElMessage.error("操作失败");
      }
    }
  } else {
    // 设置为管理员
    try {
      await ElMessageBox.confirm(`确定要将用户 ${user.username} 设置为管理员吗？`, "确认操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });

      await setUserAsAdmin(user.id);
      ElMessage.success("设置管理员成功");
      loadUsers();
    } catch (error) {
      if (error !== "cancel") {
        console.error("Set admin failed:", error);
        ElMessage.error("操作失败");
      }
    }
  }
};

// 格式化时间
const formatTime = (time: string) => {
  return new Date(time).toLocaleString();
};

// 检查是否有活动筛选
const hasActiveFilters = computed(() => {
  return !!(filters.keyword || filters.status !== "");
});

// 根据状态值获取状态名称
const getStatusName = (status: string | number) => {
  if (status === 1) {
    return "正常";
  } else if (status === 0) {
    return "已禁用";
  }
  return "未知状态";
};

// 获取状态按钮的提示信息
const getStatusButtonTooltip = (user: User) => {
  if (isCurrentUser(user.id)) {
    return "不能禁用自己的账号";
  }
  if (!isSystemAdmin.value && isSystemAdminUser(user)) {
    return "权限不足，不能禁用系统管理员账号";
  }
  return "";
};

// 获取管理员按钮的提示信息
const getAdminButtonTooltip = (user: User) => {
  if (isCurrentUser(user.id)) {
    return "不能修改自己的管理员权限";
  }
  if (isSystemAdminUser(user)) {
    return "系统管理员权限不可修改";
  }
  return "";
};

// 组件挂载
onMounted(() => {
  loadUsers();
});
</script>

<style scoped lang="scss">
.admin-users-view {
  .page-header {
    margin-bottom: 24px;
    background-color: #f5f7fa;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header-left {
      .header-title {
        h1 {
          margin: 0 0 8px 0;
          font-size: 24px;
          color: #2c3e50;
        }

        p {
          margin: 0;
          color: #666;
        }
      }
    }

    .header-stats {
      display: flex;
      align-items: center;
      gap: 24px;

      .stat-item {
        text-align: center;

        .stat-number {
          font-size: 24px;
          font-weight: 700;
          color: #409eff;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }

  .filter-status {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;

    .filter-status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .filter-status-title {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
      }
    }

    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .el-tag {
        border-radius: 4px;
        font-size: 12px;
      }
    }
  }

  .filter-card {
    margin-bottom: 24px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .filter-form {
      margin-bottom: 0;
    }
  }

  .users-card {
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: #2c3e50;

      .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .user-detail {
        .username {
          font-weight: 600;
          color: #2c3e50;
          font-size: 15px;
          margin-bottom: 4px;
        }

        .email {
          color: #666;
          font-size: 13px;
          margin-bottom: 2px;
        }

        .nickname {
          color: #909399;
          font-size: 12px;
        }
      }
    }

    .roles {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
    }

    .time-info {
      font-size: 13px;
      color: #666;
    }

    .text-muted {
      color: #c0c4cc;
      font-style: italic;
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;

      .el-button {
        margin: 0;
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 4px;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 4px;
          font-size: 14px;
        }

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        &.is-disabled {
          opacity: 0.5;
          cursor: not-allowed;

          &:hover {
            transform: none;
            box-shadow: none;
          }
        }
      }
    }

    .pagination-wrapper {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      padding: 20px 0;
      border-top: 1px solid #f0f2f5;
    }
  }

  // 用户详情对话框样式
  .user-detail-content {
    .user-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;

      .user-basic-info {
        flex: 1;

        h3 {
          margin: 0 0 8px 0;
          font-size: 20px;
          color: #2c3e50;
        }

        .user-email {
          color: #666;
          margin: 0 0 12px 0;
          font-size: 14px;
        }

        .user-roles {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
      }
    }

    .user-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      gap: 4px;

      label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
      }

      span {
        color: #666;
        font-size: 14px;
      }
    }

    .user-stats {
      h4 {
        margin: 0 0 16px 0;
        color: #2c3e50;
        font-size: 16px;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;
      }

      .stat-card {
        background: #f8fafc;
        padding: 16px;
        border-radius: 8px;
        text-align: center;
        border: 1px solid #e5e7eb;

        .stat-number {
          font-size: 24px;
          font-weight: 700;
          color: #409eff;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .user-profile {
      h4 {
        margin: 0 0 16px 0;
        color: #2c3e50;
        font-size: 16px;
      }
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .page-header {
      padding: 16px;

      .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
      }
    }

    .action-buttons {
      flex-direction: column;
      gap: 4px;

      .el-button {
        width: 100%;
        justify-content: center;
      }
    }

    .user-detail-content {
      .user-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
      }

      .user-info-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
</style>
